<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.4/swiper-bundle.css
    ">
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.4/swiper-bundle.js
    "></script>
    <style>
        img {
            width: 50px;
        }

        .swiper {
            width: 200px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .swiper img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="swiper">
        <div class="swiper-wrapper ad-list">
            <!-- 
            <div class="swiper-slide">
                <a href="">
                    <img src="" alt="">
                </a>
            </div> -->

        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>



    <ul class="hot-list">
        <li>
            <a href="">
                <img src="" alt="">
                <p></p>
            </a>
        </li>
    </ul>
    <div class="container">
        <div class="cate-list">
            <h2>搜索</h2>
            <ul class="list1">
                <li>
                    <a href="">
                        <img src="" alt="">
                        <p></p>
                    </a>
                </li>
            </ul>
        </div>
    </div>





    <script>
        // 找到了所有接口地址
        var cateAPI = 'https://www.frontendjs.com/api/w_cate'
        var siteAPI = 'https://www.frontendjs.com/api/w_site'

        var hotAPI = 'https://www.frontendjs.com/api/w_site/hot?limit=24'

        var adAPI = 'https://www.frontendjs.com/api/ad'
        var weiboAPI = 'https://www.frontendjs.com/api/hot/weibo'
        var hotArticleAPI = 'https://www.frontendjs.com/api/hot_article';
        loadCateList();
        loadHotList()
        loadAdList()

        // 定义了6个函数-一个函数调用一个接口
        function loadCateList() {
            let xhr = new XMLHttpRequest()
            xhr.open('get', cateAPI);
            xhr.send()
            xhr.onload = function () {
                if (xhr.status == 200) {

                    let obj = JSON.parse(xhr.responseText)
                    // console.log(obj, '第一层列表数据');



                    // 获取最外层的列表的数据

                    // 调用的第二个列表
                    let xhr2 = new XMLHttpRequest()
                    xhr2.open('get', siteAPI);
                    xhr2.send()
                    xhr2.onload = function () {
                        if (xhr2.status == 200) {
                            let obj2 = JSON.parse(xhr2.responseText)
                            // console.log(obj2, '第二层列表');

                            // 
                            let str = ''
                            // 遍历的第一层列表 目录列表
                            obj.data.forEach(v => {
                                // obj -》v -
                                // v 一个v表示一个目录 v.title 目录的标题
                                // v.type
                                // 根据 目录type属性，找到 目录的所有子列表中数据
                                // 去obj2.data.list 里面找对应的 目录的子列表数据（v。type）
                                // 去obj2.data.list 中找到 元素的type属性和变量v.type相等 
                                var subList = obj2.data.list.filter(item => item.type == v.type);
                                // console.log(v);//目录数据
                                // console.log(subList);//目录子列表
                                // subList 要生成--ul里面的li列表

                                obj2.data
                                // 映射了 li字符串，  再将li字符串使用 join 链接
                                let ulStr = subList.map(v2 => ` <li>
                                                                    <a href="${v2.link}">
                                                                        <img src="${v2.img}" alt="">
                                                                        <p>${v2.title}</p>
                                                                    </a>
                                                                </li>`).join('')

                                str += `
                                    <div class="cate-list">
                                        <h2>${v.title}</h2>
                                        <ul class="list1">
                                            
                                           ${ulStr}
                                        </ul>
                                    </div>
                        
                        `
                            })

                            document.querySelector('.container').innerHTML = str;



                        }
                    }



                }
            }
        }

        function loadHotList() {
            let xhr = new XMLHttpRequest()
            xhr.open('get', hotAPI);
            xhr.send()
            xhr.onload = function () {
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText)
                    // console.log(obj);

                    // map 映射出了 li字符串 数组，join 连接成一个字符串
                    let ulStr = obj.data.map(v => `
                        <li>
                            <a href="${v.link}">
                                <img src="${v.img}" alt="">
                                <p>${v.title}</p>
                            </a>
                        </li>
                        `).join('');
                    document.querySelector('.hot-list').innerHTML = ulStr

                }
            }
        }


        function loadAdList() {
            let xhr = new XMLHttpRequest()
            xhr.open('get', adAPI);
            xhr.send()
            xhr.onload = function () {
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText)
                    console.log(obj);
                    // map 映射li字符串 -join 链接
                    let adListStr = obj.data.map(v => ` <div class="swiper-slide">
                            <a href="${v.link}">
                                <img src="${v.img}" alt="">
                            </a>
                        </div>`).join('');
                    document.querySelector(".ad-list").innerHTML = adListStr;
                    // 在这句代码以后 swiper 里面的内容才有了
                    // 在这里调用swiper里面的js
                    var mySwiper = new Swiper('.swiper', {
                        // direction: 'vertical', // 垂直切换选项
                        loop: true, // 循环模式选项

                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        },

                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },

                    })
                }
            }
        }



        function loadWeiboList() {
            let xhr = new XMLHttpRequest()
            xhr.open('get', weiboAPI);
            xhr.send()
            xhr.onload = function () {
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText)
                    console.log(obj);

                }
            }
        }

        function loadhotArticleList() {
            let xhr = new XMLHttpRequest()
            xhr.open('get', hotArticleAPI);
            xhr.send()
            xhr.onload = function () {
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText)
                    console.log(obj);

                }
            }
        }

    </script>

</body>

</html>